<template>
  <div class="common-layout">
    <hc-container>
      <hc-aside
        width="200px"
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #d3dce6;
        "
        >Aside</hc-aside
      >
      <hc-container>
        <hc-header
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #b3c0d1;
          "
          >Header</hc-header
        >
        <hc-main
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #e9eef3;
          "
          >Main</hc-main
        >
        <hc-footer
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #b3c0d1;
          "
          >Footer</hc-footer
        >
      </hc-container>
    </hc-container>
  </div>
</template>
